<template>
  <div class="index">
    <div class="top_one">
      <div v-for="(v ,i ) in info" :key="i">
          <p class="p1"><span>{{ v.title }}</span><el-tag size="small " type="success">{{ v.date }}</el-tag></p>
          <div class="div1">
              <p class="p1">
                  {{ v.yesterday }}
              </p>
              <p class="p2">
                <span>日同比{{ v.today_ratio }}%<i style="color:rgb(127, 235, 145);" class="el-icon-caret-top"></i></span>
                <span>周同比{{ v.today }}%<i style="color:red;" class="el-icon-caret-bottom"></i></span>
              </p>
          </div>
          <p class="p2">
            <span>{{ v.total_name }}</span><span>{{ v.total }}</span>
          </p>
      </div>
    </div>
    <div class="top_two">
      <el-col :span="8" v-for="(v,i) in kehu" :key="i">
        <el-card shadow="hover">
          <div class="shop_dian">
            <p><i :class="v.icon" :style="v.color"></i></p>
            
            <p>{{v.name}}</p>
            
          </div>
          
        </el-card>
      </el-col>
      
      
    </div>

    <div class="top_three">
      <p><i class="el-icon-s-data"></i>订单</p>
      <hr style="background-color:#f1f1f1;height:2px; border:none;">
      <div>
          <div style="width: auto;height: 400px" id="main">
          </div>
      </div>
    </div>

    <div class="top_four">
      <div>
        <p><i class="el-icon-data-line"></i>用户</p>
      <hr style="background-color:#f1f1f1;height:2px; border:none;">
      <div>
          <div style="width: auto;height:350px" id="main1">
          </div>
      </div>
      </div>
      <div>
          <p><i class="el-icon-picture-outline-round"></i>购买用户统计</p>
      <hr style="background-color:#f1f1f1;height:2px; border:none;">
      <div>
          <div style="width: auto;height: 350px" id="main2">
          </div>
      </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import {lines,types,homelist} from '../../api/index'
export default {
  data() {
    return {
      xzhou:[],
      twoech:{},
      info:[],
      kehu:[
        {
          "id":0,
          name:'用户管理',
          icon:"el-icon-user-solid",
          color:"color: rgb(105, 192, 255)"
        },
        {
          "id":1,
          name:'系统设置',
          icon:"el-icon-s-tools",
          color:"color: rgb(149, 222, 100)"
        },
        {
          "id":2,
          name:'商品',
          icon:"el-icon-shopping-cart-full",
          color:"color: rgb(255, 156, 110)"
        },
        {
          "id":3,
          name:'订单管理',
          icon:"el-icon-s-order",
          color:"color: rgb(179, 127, 235)"
        },
        {
          "id":4,
          name:'短信配置',
          icon:"el-icon-message",
          color:"color: rgb(255, 214, 102)"
        },
        {
          "id":5,
          name:'文章管理',
          icon:"el-icon-notebook-2",
          color:"color: rgb(92, 219, 211)"
        },
        {
          "id":6,
          name:'分销管理',
          icon:"el-icon-discount",
          color:"color: rgb(255, 133, 192)"
        },
        {
          "id":7,
          name:'优惠券',
          icon:"el-icon-money",
          color:"color: rgb(255, 192, 105)"
        }
      ]
    };
  },
  created(){
    this.joint();

    //主页header
    homelist().then(res => {
      console.log(res.data);
      if (res.data.status == 200) {
        this.info = res.data.data.info
      }else{
        this.$message.error('info数据获取失败')
      }
    },err => {
      console.log(err);
    })
  },
  methods: {
    echartsthree(){

      let option = {
          tooltip: {
              trigger: 'item'
          },
          legend: {
              orient: 'vertical',
              left: 'right',
          },
          series: [
              {
                  name: '访问来源',
                  type: 'pie',
                  radius: '50%',
                  data: this.twoech.bing_data,
                  emphasis: {
                      itemStyle: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              }
          ]
        }

        let echthree = this.$echarts.init(document.getElementById('main2'))

        echthree.setOption(option)

        window.onresize = function () {
          echthree.resize();
        }
    },
    echartstwo(){

      let option = {
        tooltip: {
        trigger: 'axis'
        },
        calculable: true,
          xAxis: {
            type: 'category',
            data: this.twoech.xAxis
          },
          yAxis: {
            type: 'value',
          },
          series: [{
            name: this.twoech.legend[0],
            data: this.twoech.series,
            type: 'bar',
            
            backgroundStyle: {
              color: '#69cdff'
            }
          }]
        }

        let echtwo = this.$echarts.init(document.getElementById('main1'))
      echtwo.setOption(option)

      window.onresize = function () {
        echtwo.resize();
      }
    },
    echartsInit() {
	    	//柱形图
	    	//因为初始化echarts 的时候，需要指定的容器 id='main'
        let option = {
        title: {
        text: '订单量趋势',
        },
        tooltip: {
        trigger: 'axis'
        },
        calculable: true,
          xAxis: {
            type: 'category',
            data: this.xzhou.xAxis
          },
          legend: {
            data: this.xzhou.legend
          },
          yAxis: {
            type: 'value',
          },
          series: [{
            name: this.xzhou.legend[0],
            data: this.xzhou.series[0].data,
            type: this.xzhou.series[0].type,
            
            backgroundStyle: {
              color: '#69cdff'
            }
          },{
            name: this.xzhou.legend[1],
            data: this.xzhou.series[1].data,
            type: this.xzhou.series[1].type,
            
            backgroundStyle: {
              color: '#2cc981'
            }
          }]
        }

        let echone = this.$echarts.init(document.getElementById('main'))
			  echone.setOption(option)

        
            window.onresize = function () {
              echone.resize();
            }
		}
,
    joint(){

      Promise.all([lines(),types()]).then(res => {
            //console.log(res);
            console.log(res[0].data.data);
            //console.log(res[1].data.data);

            //第一个图
            this.xzhou = res[1].data.data
            this.echartsInit()

            //第二个图
            this.twoech = res[0].data.data
            this.echartstwo()

            //第三个图
            this.echartsthree()
          },err => {
            console.log(err);
          })
      

    }
  },
};
</script>
<style lang='scss' scoped>
.top_one{
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  div{
    width: 22%;
    height: 100%;
    background: white;
    box-shadow: 4px 4px 4px #ccc;
    .p1{
      width: 100%;
      height: 50px;
      border-bottom: 1px solid #ccc;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 8px;
      box-sizing: border-box;
    }
    .div1{
      width: 100%;
      height: 110px;
      box-shadow: 1px 1px 1px #ccc;
      .p1{
        width: 100%;
        height: 70px;
        border-bottom: 0px;
        font-size: 30px;
        padding: 0 10px;
        box-sizing: border-box;
      }
      .p2{
        width: 100%;
        height: 30px;
        font-size: 14px;
        font-weight: 100;

      }
    }
    .p2{
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      box-sizing: border-box;
      font-size: 14px;
      font-weight: 100;
    }
  }
}

.p1>span:nth-child(1){
  font-size: 16px;
}

.top_one>div>.div1>.p2>span:nth-child(1){
  float: left;
}
.top_one>div>.div1>.p2>span:nth-child(2){
  float: left;
}

.top_two{
  width: 100%;
  height: 66px;
  margin-top: 2px;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-around;
}

.shop_dian{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.shop_dian>p:nth-child(1){
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.shop_dian>p:nth-child(2){
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2px;
  font-size: 12px;
  white-space: nowrap;
}

@media screen and (max-width:1200px) {
  .top_one{
    width: 100%;
    height: 420px;
    display: flex;
    flex-wrap: wrap;
  }
  .top_one>div{
    width: 48%;
    height: 50%;
    margin-top: 10px;
  }
}

.el-col-8{
  padding: 2;
}

.top_two .el-col  .el-card__body{
  padding: 0;
  margin: 0;
}

.text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }

  .top_three{
    width: 100%;
    height: 400px;
    margin-top: 44px;
    background: white;
    p{
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      font-size: 16px;
      font-family: '微软雅黑';
      padding: 0 10px;
      box-sizing: border-box;
      i{
        color: deepskyblue;
        margin-right: 4px;
      }
    }
    div{
      width: 100%;

    }
  }

  .top_four{
    width: 100%;
    height: 350px;
    margin-top: 6px;
    background: white;
    display: flex;
    justify-content: space-between;
    background: #f1f1f1;
  }
  .top_four>div:nth-child(1){
    width: 60%;
    height: 100%;
    background: white;
  }
  .top_four>div:nth-child(1)>p{
    width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      font-size: 16px;
      font-family: '微软雅黑';
      padding: 0 10px;
      box-sizing: border-box;
      i{
        color: deepskyblue;
        margin-right: 4px;
      }
  }
  .top_four>div:nth-child(2){
    width: 38%;
    height: 100%;
    background: white;
  }
  .top_four>div:nth-child(2)>p{
    width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      font-size: 16px;
      font-family: '微软雅黑';
      padding: 0 10px;
      box-sizing: border-box;
      i{
        color: deepskyblue;
        margin-right: 4px;
      }
  }
</style>